<template>
  <div>
    <el-alert
      :closable="false"
      :title="`新用户注册会默认成为${ defaultVip.description},折扣为0代表不可见产品价格`"
      type="success"
    />
    <el-card class="base-el-card-bottom">
      <div slot="header" class="clearfix">
        <span>会员等级列表</span>
        <el-button class="base-el-float-right" type="primary" icon="el-icon-refresh" @click="submitForm">刷新</el-button>
      </div>
      <PaginationTable
        :table-data="tableData"
        :show-pagination="false"
      >
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="等级描述" prop="description" />
        <el-table-column label="折扣">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.discount }}折</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否为会员默认等级">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isDefault ? 'success' : 'danger'">{{ scope.row.isDefault ? '是' : '否' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | timeFormatFilter }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link><br>
          </template>
        </el-table-column>
      </PaginationTable>

      <el-dialog title="编辑会员等级信息" :show-close="false" :visible="dialogVisible">
        <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="100px">
          <el-form-item label="等级信息" prop="description">
            <el-input v-model="dataForm.description" />
          </el-form-item>
          <el-form-item v-if="!(dataForm._id && dataForm.discount === 0)" label="折扣" prop="description">
            <el-input-number v-model="dataForm.discount" :min="0" :max="100" :step="1" />
          </el-form-item>
        </el-form>
        <span slot="footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="doEdit">确认</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>

import PaginationTable from '@/components/PaginationTable'
import { queryByCondition, updateById } from '@/api/commoncrud'
export default {
  name: 'User',
  components: { PaginationTable },
  data() {
    return {
      tableData: [],
      defaultVip: {},

      dataForm: {
        description: '',
        discount: ''
      },
      rules: {
        description: [{ required: true, trigger: 'blur', message: '请输入会员等级信息' }],
        discount: [{ required: true, trigger: 'blur', message: '请输入折扣' }]
      },

      dialogVisible: false
    }
  },
  async created() {
    await this.fetchData()
  },
  methods: {
    async fetchData() {
      const res = await queryByCondition('viplevel', 0, 100, {})
      this.tableData = res.data.documentList
      this.total = res.data.documentCount
      this.defaultVip = this.tableData.find(v => v.isDefault)
    },
    handleEdit(vipData) {
      this.dataForm = { ...vipData }
      this.dialogVisible = true
    },
    handleClose() {
      this.dataForm = {
        description: '',
        discount: ''
      }
      this.dialogVisible = false
    },
    async doEdit() {
      this.$refs['dataForm'].validate(async validate => {
        if (validate) {
          const vipId = this.dataForm._id
          delete this.dataForm._id
          await updateById('viplevel', vipId, { description: this.dataForm.description, discount: this.dataForm.discount || 0 })
          this.handleClose()
          this.$message.success('操作成功!')
          await this.fetchData()
        }
      })
    },

    // 表格数据
    async submitForm() {
      this.currentPage = 1
      await this.fetchData()
    }
  }
}
</script>

<style scoped>
</style>
